<script setup lang='tsx'>

import data from 'emoji-mart-vue-fast/data/all.json'
// Import default CSS
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
import {
    Check,
    Delete,
    Edit,
    Message,
    Setting,
    Star,
    Close
} from '@element-plus/icons-vue'



const content = ref<string[]>([])
function formatLen() {
    // 如果超出限制，删除第一个 Emoji
    if (content.value.length > pickerConfig.showNum) {
        content.value.splice(0, content.value.length - pickerConfig.showNum);
    }
}
const pickerConfig = reactive({
    showNum: 6,
    editState: false
})
const { showNum, editState } = toRefs(pickerConfig)
const dialogVisible = ref(false);
watch(showNum, (val: any) => {
    formatLen()
})
function remove(i: number) {
    content.value.splice(i, 1)
}


const emojiI18n = {
    search: '搜索',
    notfound: 'No Emoji Found',
    categories: {
        search: '搜索结果',
        recent: '经常使用',
        smileys: '表情与情感',
        people: '人物与身体',
        nature: '动物与自然',
        foods: '食物与饮料',
        activity: '活动',
        places: '旅行与地理',
        objects: '物品',
        symbols: '符号标志',
        flags: '旗帜',
        custom: 'Custom',
        joy: '哭笑',
        face: '脸'
    }
}
const emojiIndex = new EmojiIndex(data)
// 选中emoji
const handleEmoji = (e: { native: string }) => {
    console.log(e)
    content.value.push(e.native)
    formatLen()
}
</script>

<template>
    <div class='h-100% w-100% flex flex-col'>
        <div class="h-50% flex flex-items-center flex-justify-center" style="font-size: 50px;">
            <div v-for="(item, i) in content" class="relative">
                {{ item }}
                <span class="absolute top--10% right--5% close-icon" @click="remove(i)" v-show="editState">
                    <el-icon>
                        <Close />
                    </el-icon>
                </span>
            </div>
        </div>
        <div class="h-50% relative">

            <div class="w-50% relative" style="margin: 0 auto;">
                <div class="absolute left-101% h-100% flex flex-col gap-10px">
                    <el-tooltip class="box-item" effect="dark" content="清除全部" placement="right">
                        <el-button type="danger" :icon="Delete" circle size="large" plain @click="content = []" />
                    </el-tooltip>
                    <el-tooltip class="box-item" effect="dark" content="设置" placement="right">
                        <el-button :icon="Setting" circle size="large" @click="dialogVisible = true" />
                    </el-tooltip>
                    <el-tooltip class="box-item" effect="dark" content="编辑" placement="right">
                        <el-button type="primary" :icon="Edit" circle size="large" plain
                            @click="editState = !editState" />
                    </el-tooltip>
                    <!-- 
                    <el-button type="success" :icon="Check" circle size="large" plain />
                    <el-button type="info" :icon="Message" circle size="large" plain /> -->
                    <!-- <el-button type="danger" :icon="Delete" circle @click="content = []" /> -->
                </div>
                <!-- <EmojiPicker :display-recent="true" :static-texts style="width:100%;height: 400px;" :native="true"
                    @select="onSelectEmoji" :group-names /> -->
                <Picker :data="emojiIndex" :emojiSize="34" :showPreview="true" :infiniteScroll="false" :i18n="emojiI18n"
                    set="apple" @select="handleEmoji" />
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="修改长度" width="500">
            <div class="flex flex-justify-center p-40px">
                <el-input-number v-model="pickerConfig.showNum" :min="0" />
            </div>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped>
:deep(.emoji-mart.emoji-mart-static) {
    width: 100% !important;
}

:deep(.el-button + .el-button) {
    margin-left: 0;
}

.close-icon {
    font-size: 20px;
    border-radius: 50%;
    background-color: brown;
    color: #fff;
    cursor: pointer;
}
</style>